<template>
	<view>
		<view class="content">
			<image class="img" :src="avatar?avatar:defaultImg"></image>
			<view class="nickname">{{nickname}}</view>
			<view style="padding: 30upx;background: #FFFFFF;">
				<tki-qrcode ref="qrcode" :val="val" :size="size" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake" />
			</view>
		</view>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				val: 'http://yingyuphone.yuzhekeji.top/#/pages/register/index?mark=' + uni.getStorageSync('userId'),
				 // val: 'http://192.168.10.34:8080/#/pages/register/index?mark=' + uni.getStorageSync('userId'),// 要生成的二维码值
				size: 200, // 二维码大小
				background: '#b4e9e2', // 背景色
				foreground: '#ffffff', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '/static/logo.png', // 二维码图标
				iconsize: 40, // 二维码图标大小
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				defaultImg: '/static/logo.png',
				nickname: '',
				avatar: ''
			}
		},
		onLoad(option) {
			this.avatar = option.avatar ? option.avatar : ''
			this.nickname = option.nickname
		},
		onReady() {
			this.creatQrcode()
		},
		methods: {
			sliderchange(e) {
				this.size = e.detail.value
			},
			creatQrcode() {
				this.$nextTick(function() {
					this.$refs.qrcode._makeCode()
				})
			},
		}
	}
</script>
<style>
	.content {
		position: relative;
		top: 180upx;
		margin: auto;
		text-align: center;
		font-size: 30upx;
		width: 480upx;
	}

	.img {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		border: 2upx solid #9AC7F1;
	}

	.nickname {
		margin: 40upx 0;
		color: #FFFFFF;
	}
</style>
